<template>
  <div>
    <vxe-grid id="xGrid" ref="xGrid" column-key v-bind="gridOptions" :height="387" header-align="center" :pager-config="false">
      <template #toolbar_buttons>
        <span class="title">FAB LIST：</span>
        <vxe-button @click="insertEvent">新增</vxe-button>
      </template>
      <template #operate="{ row ,rowIndex }">
        <vxe-button
          size="mini"
          @click="deleteItem(row,rowIndex)"
        >删除</vxe-button>
      </template>
      <template #pager>
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :current-page.sync="gridOptions.pagerConfig.currentPage"
          :page-size.sync="gridOptions.pagerConfig.pageSize"
          :total="gridOptions.pagerConfig.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import { VxeListMixin } from '@/mixins/VxeListMixin'

export default {
  components: {

  },
  mixins: [VxeListMixin],
  data() {
    return {
      list: null,
      listLoading: true,
      machineLoading: false,
      tableHeight: 370,
      url: {
        queryList: this.$api.projectController.getfabList,
        setfabList: this.$api.projectController.setfabList,
        deleteFabList: this.$api.projectController.deleteFabList
      },
      params: {
        page: 1,
        pageSize: 10,
        projectId: ''
      },
      toolbarConfig: {
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      editConfig: {
        trigger: 'click',
        mode: 'cell'
      },
      editRules: {
        fabName: [
          { required: true, message: '请输入名称' },
          {
            validator({ cellValue }) {
              // 模拟服务端校验
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  if (cellValue && (cellValue.length < 2 || cellValue.length > 50)) {
                    reject(new Error('名称长度在 2 到 50 个字符之间'))
                  } else {
                    resolve()
                  }
                }, 100)
              })
            }
          }
        ],
        fabAddress: [
          { required: true, message: '请输入名称' }
        //   {
        //     validator({ cellValue }) {
        //       if (cellValue && !['Develop', 'Test', 'Designer', 'PM'].includes(cellValue)) {
        //         return new Error('地址输入不正确')
        //       }
        //     }
        //   }
        ]
      },
      columns: [
        { type: 'seq', title: '序号', width: 70, fixed: 'left', align: 'right' },
        { field: 'fabName', title: 'FAB NAME', width: 140, editRender: { name: 'input' }},
        { field: 'fabAddress', title: 'FAB ADDRESS', minWidth: 80, editRender: { name: 'input' }},
        { title: '操作', width: 140, slots: { default: 'operate' }, fixed: 'right', align: 'center' }
      ],
      initItem: {
        id: '',
        fabName: '',
        fabAddress: ''
      },
      data: [
        { id: '', fabName: '', fabAddress: '' },
        { id: '', fabName: '', fabAddress: '' },
        { id: '', fabName: '', fabAddress: '' },
        { id: '', fabName: '', fabAddress: '' },
        { id: '', fabName: '', fabAddress: '' }
      ]
    }
  },
  watch: {
    params: {
      handler(newValue, oldValue) {
        if (newValue.time == null) {
          newValue.time = []
        }
      },
      deep: true
    }
  },
  mounted() {
    this.tableHeightFun()
  },
  created() {
    this.gridOptions.columns = this.columns
    this.gridOptions.toolbarConfig = this.toolbarConfig
    this.gridOptions.editConfig = this.editConfig
    this.gridOptions.editRules = this.editRules
    // this.gridOptions.data = []
    // this.init()
  },
  methods: {
    async init(projectId) {
      this.params.projectId = projectId
      this.url.query = this.url.queryList
      await this.query()
      if (this.gridOptions.data === undefined) {
        this.gridOptions.data = []
      }
      // if (this.gridOptions.data.length < 5) {
      //   for (let index = 0; index < 5 - this.gridOptions.data.length + 1; index++) {
      //     this.gridOptions.data.push({
      //       id: '',
      //       fabName: '',
      //       fabAddress: ''
      //     })
      //   }
      // }
    },
    deleteItem(row, rowIndex) {
      if (row.id) {
        this.$fetchData(this.url.deleteFabList, { id: row.id }, 'post').then(res => {
          this.gridOptions.data.splice(rowIndex, 1)
        })
      } else {
        this.gridOptions.data.splice(rowIndex, 1)
      }
    },
    async insertEvent() {
      // this.gridOptions.data.splice(0, 0, {
      //   id: '',
      //   fabName: '',
      //   fabAddress: ''
      // })

      this.gridOptions.data.push({
        id: '',
        fabName: '',
        fabAddress: ''
      })
    },
    async setFabList(projectId) {
      console.log(this.gridOptions.data)
      const errMap = await this.$refs.xGrid.validate(true)
      if (errMap) {
        return this.$message.error('fab校验不通过！')
      } else {
        const param = {
          projectId: projectId,
          fabList: this.gridOptions.data
        }
        this.$fetchData(this.url.setfabList, param, 'post').then(res => {
          this.query()
          this.$message.success('fab设置成功')
        })
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
.title{
    font-weight: 700;
}
</style>
